// React中的列表 & keys   (渲染多个组件)

// 我们使用JavaScript中的map函数，来渲染多个组件

// 注意！key应在数组的上下文中被指定，并且元素的key只有和兄弟组件对比时才有意义。元素的key在它的兄弟组件之间应该是唯一的。

// 当我们生成两个不同的数组时(渲染两个不同的组件)，我们可以使用相同的key，不会互相影响。

// 在React中，props在传递数据时不会把key传给组件。如果需要传递和key相同的值，请用别的属性名，例如id={data}。

import React, {Component} from 'react';
import './NumberList.css';

class NumberList extends Component {
    render(){
        const numbers = ['React','Redux','React-router','Ant-design-pro','ES6','Webpack'];
        const ListItems = numbers.map((number) => {
            return <ListItem key={number.toString()} value={number}/>
        })
        return (
            <div>我是NumberList组件
                <ul>
                    {ListItems}
                </ul>
            </div>
        )
    }
}

class ListItem extends Component {
    render(){
        return (
            <div>
                <li>
                    {this.props.value}
                </li>
            </div>
        )
    }
}

export default NumberList;